<template>
  <div>
    <el-card v-loading="loading">

      <avue-crud :data="data" :option="option" @refresh-change="refreshChange" @row-save="rowSave" @row-update="rowUpdate"
        @row-del="rowDel" v-model:page="page" @search-change="searchChange" @size-change="sizeChange"
        @current-change="currentChange">
        <template #adp="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.adp" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="[scope.row.adp]" fit="cover" />
        </template>
        <template #code="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.code" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="[scope.row.code]" fit="cover" />
        </template>
      </avue-crud>
    </el-card>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addXdealerController, deleteXdealerController, updateXdealerController, getXdealerController } from '@/api/agency.ts'
import { useUserStore } from '@/store/modules/user'
import { uploadUrl } from "@/api/upload";
import { getStorage } from '@/utils/storage'


const token = getStorage('token');
const { userMessage } = useUserStore()
const loading = ref(true)
const data = ref([]);


const page = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10
})


const getData = () => {
  loading.value = true

  let Q = {
    index: page.value.currentPage,
    size: page.value.pageSize,
  }


  getXdealerController(Q).then(res => {
    data.value = res.result
    page.value.total = res.page?.total
    loading.value = false
  })
}


getData()

const option = ref({
  searchMenuSpan: 18,
  column: [
    {
      label: '经销商名称',
      prop: 'name',
    },
    {
      label: '地址',
      prop: 'address',
    },
    {
      label: '地图图片地址',
      prop: 'adp',
      type: 'upload',
      listType: 'picture-card',
      span: 24,
      limit: 1,
      dicHeaders: {
        token
      },
      propsHttp: {
        fileName: 'fileUpload',
        res: 'data.result[0]',
        url: 'uuid',
        name: 'name'
      },
      action: uploadUrl,
    },
    {
      label: '公众号二维码地址',
      prop: 'code',
      type: 'upload',
      listType: 'picture-card',
      span: 24,
      limit: 1,
      dicHeaders: {
        token
      },
      propsHttp: {
        fileName: 'fileUpload',
        res: 'data.result[0]',
        url: 'uuid',
        name: 'name'
      },
      action: uploadUrl,
    },
    { label: '传真', prop: 'cz', },
    { label: '邮箱', prop: 'email', },
    { label: '电话', prop: 'phone', },
    {
      label: '类型 ',
      prop: 'type',
      type: 'switch',
      dicData: [
        { label: '本公司', value: 0 },
        { label: '经销商', value: 1 },
      ],
      value: 0
    },
    {
      label: '创建时间',
      prop: 'createTime',
      display: false
    }
  ]
});


function searchChange(params, done) {
  if (!params.id) {
    done();
    return getData()
  }
  loading.value = true
  IdXpictireControllerSelect(params.id).then(res => {
    data.value = [res.result]
    page.value.total = 1
    loading.value = false
    done();
  })


}


const refreshChange = () => {
  getData()
};

const rowSave = (form, done, loading) => {
  // loading();
  addXdealerController(form).then(res => {
    if (res !== 'error') {
      done(form);
      getData();
    } else {
      done();
    }
  })

};

const rowDel = (form, index, done) => {
  ElMessageBox.confirm('是否删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteXdealerController(form.id).then(res => {
      ElMessage.success('删除成功!');
      done(form);

    })

  }).catch(() => { });
};

const rowUpdate = (form, index, done, loading) => {

  updateXdealerController(form).then(res => {
    ElMessage.success('修改成功');
    done(form);
    if (form.id == userMessage.id) {
      Object.keys(userMessage).forEach(key => {
        userMessage[key] = form[key]
      });
    }
  })
};



function sizeChange(val) {
  page.value.currentPage = 1;
  page.value.pageSize = val;
  getData();
}

function currentChange(val) {
  page.value.currentPage = val;
  getData();
}
</script>